<script>
import draggable from "vuedraggable";
import render from "@/utils/generator/render";

const layouts = {
  colFormItem(h, element, index, parent) {
    let className =
      this.activeId === element.formId
        ? "drawing-item active-from-item"
        : "drawing-item";
    if (this.formConf.unFocusedComponentBorder)
      className += " unfocus-bordered";
    if(element.tag === 'el-upload'){
      className += " widthAuto"
    }
    if(element.limit && element.defaultValue && element.limit === element.defaultValue.length){
      className += " limitHide"
    }
    return (
      <el-col span={element.span} class={className}>
        <el-form-item
          label-width={element.labelWidth ? `${element.labelWidth}px` : null}
          label={element.label}
          prop={element.vModel}
        >
          <render
            key={element.renderKey}
            conf={element}
            onInput={(event) => {
              this.$set(element, "defaultValue", event);
              this.$emit("onInput", { value: event, vModel: element.vModel });
            }}
          />
        </el-form-item>
      </el-col>
    );
  },
  rowFormItem(h, element, index, parent) {
    const className =
      this.activeId === element.formId
        ? "drawing-row-item active-from-item"
        : "drawing-row-item";
    let customStyle = `word-break: break-all;padding: 10px;color: ${element.color};font-size:${element.fontSize}px;font-weight:${element.fontWeight};text-align: ${element.textAlign};`;
    let child = renderChildren.apply(this, arguments);
    if (element.type === "flex") {
      child = (
        <el-row
          type={element.type}
          justify={element.justify}
          align={element.align}
        >
          {child}
        </el-row>
      );
    }
    return (
      <el-col span={element.span}>
        <el-row gutter={element.gutter} class={className}>
          <div style={customStyle}>{element.defaultValue}</div>
          <draggable
            list={element.children}
            animation={340}
            group="componentsGroup"
            class="drag-wrapper"
            class={element.defaultValue ? "" : "drag-wrapper"}
          >
            {child}
          </draggable>
        </el-row>
      </el-col>
    );
  },
};

function renderChildren(h, element, index, parent) {
  if (!Array.isArray(element.children)) return null;
  return element.children.map((el, i) => {
    const layout = layouts[el.layout];
    if (layout) {
      return layout.call(this, h, el, i, element.children);
    }
    return layoutIsNotFound();
  });
}

function layoutIsNotFound() {
  throw new Error(`没有与${this.element.layout}匹配的layout`);
}

export default {
  components: {
    render,
    draggable,
  },
  props: ["element", "index", "drawingList", "activeId", "formConf"],
  render(h) {
    const layout = layouts[this.element.layout];

    if (layout) {
      return layout.call(this, h, this.element, this.index, this.drawingList);
    }
    return layoutIsNotFound();
  },
};
</script>
